<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type="text/css">
.serviceField { color:black; background-color:white; padding:20px; border:2px; margin:2px}
.personField { color:black; background-color:white; padding:20px; border:2px; margin:2px;}
/* general */

    body{ 
		background:#d8e6ec url(/smartView/pic/bg_body.gif) repeat-x;
        font:80% Arial, Helvetica, Sans-Serif;
		color:#555;
		line-height:180%;
		margin:0;
		padding:0;
		text-align:center;
        }
	h1{
		font-size:60pt;
		font-weight:normal;
		margin:0;
		padding-left:35px;
		padding-top:100px;
		color: white;
		
		}		
	h2, h3, h4, h5, h6{
		font-weight:normal;
		margin:1em 0;
		}	
	h2{            
		font-size:160%;
		}	
	h3{          
		font-size:140%;
		}
	h4{          
		font-size:120%;
		}				
	a{
		text-decoration:none;
		color:#fff;
		}
	a:hover{
		color:#d8e6ec;
		text-decoration:underline;
		}							
	p{
		margin:1em 0;
		}		


/* // general */

/* page setup */

	#container{	
		margin:0 auto;
		width:928px;
		text-align:left;
		}
	#header{
		height:236px;
		background:url(/smartView/pic/bg_header.jpg) no-repeat 0 0;
		}				
	#content{
		background:url(/smartView/pic/bg_content.gif) repeat-y;
		padding:.5em 34px;
		}
	#footer{
		padding:25px 60px;
		background:url(/smartView/pic/bg_footer.gif) no-repeat 0 0;				
		color:#fff;
		}				

/* //page setup */


</style>

<script type="text/ecmascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/ecmascript">
 
function validateId() {        
	$.ajax({            
		url: "/smartView/spring/main/ajaxValidateId",            
		type: "POST",    
 		data: ({userid:$("input[name=userid]").val()}),         
		//contentType: "text/plain; charset=euc-kr",            
		success: function(data) {                
			if(data != null)    {                    
				$("#checkId").html(data);                
				} else {                    
					$("#checkId").html("null");                
					}            
			}    
		});    
	};
	
	 
	function validatePw() {        
		$.ajax({            
			url: "/smartView/spring/main/ajaxValidatePw",            
			type: "POST",    
	 		data: ({userpw:$("input[name=userpassword]").val()}),         
			//contentType: "text/plain; charset=euc-kr",            
			success: function(data) {                
				if(data != null)    {                    
					$("#checkPw").html(data);                
					} else {                    
						$("#checkPw").html("null");                
						}            
				}        
			});    
		};	
		
	function toggleYahooZipText(){
		if(	$("input[name=yahooWeatherChk]").is(':checked')){
			$("input[name=yahooZip]").attr("readonly",false);
			$("input[name=yahooZip]").attr("disabled",false);
		}
		else{
			$("input[name=yahooZip]").attr("disabled",true);
		}
	}
	
	function toggleYahooSelector(){
		if(	$("input[name=yahooChk]").is(':checked')){
			$("select[name=yahooService]").attr("readonly",false);
			$("select[name=yahooService]").attr("disabled",false);
		}
		else{
			$("input[name=yahooService]").attr("disabled",true);
		}
	}
	
	function toggleFacebookText(){
		if(	$("input[name=facebookChk]").is(':checked')){
			$("input[name=facebookId]").attr("readonly",false);
			$("input[name=facebookId]").attr("disabled",false);
			$("input[name=facebookPw]").attr("readonly",false);
			$("input[name=facebookPw]").attr("disabled",false);
			
		}
		else{
			$("input[name=facebookId]").attr("disabled",true);
			$("input[name=facebookPw]").attr("disabled",true);
		}
	}
	
	function toggleTwitterText(){
		if(	$("input[name=twitterChk]").is(':checked')){
			$("input[name=twitterId]").attr("readonly",false);
			$("input[name=twitterId]").attr("disabled",false);
			$("input[name=twitterPw]").attr("readonly",false);
			$("input[name=twitterPw]").attr("disabled",false);
		}
		else{
			$("input[name=twitterId]").attr("disabled",true);
			$("input[name=twitterPw]").attr("disabled",true);
		}
	}


</script>
</head>
<body>
<div id="container">
<form name="f" action="/smartView/spring/main/register" >
	<div id="header"><h1>  Welcome!! </h1></div>
	<div id="content">
	
	<table class="personField">
		<tr>
			<td align="right">Id : </td>
			<td><input type="text" name="userid"></td><td><div id="checkId"></div></td>
		</tr>
		<tr>
			<td align="right">Password : </td>
			<td><input type="password" name="userpassword" ></td><td><div id="checkPw">Use only 6~8 characters</div></td>
		</tr>
		<tr>
			<td align="right">Name : </td>
			<td><input type="text" name="username"></td>
		</tr>
		<tr>
			<td>Select service</td><br>
		</tr>
		<tr>
			<table class="serviceField">
				<tr>
					<td><input type="checkbox" name="yahooWeatherChk"/>Yahoo Weather</td>
					<td align="right"> Zip code : </td>
					<td><input type="text" name="yahooZip" disabled="true"/></td>
				</tr>
			</table>
		</tr>
		<tr>
			<table class="serviceField">
				<tr>
					<td><input type="checkbox" name="yahooNewsChk"/>Yahoo News</td>
				</tr>
			</table>
		</tr>
		<tr>
			<table class="serviceField">
				<tr>
					<td><input type="checkbox" name="yahooChk"/>Yahoo company News(financial)</td>
					<td align="right"> service : </td>
					<td><select name="yahooService" disabled="disabled">
							<option value="yhoo">Yahoo</option>
							<option value="msft">Microsoft</option>
							<option value="tivo">Tivo</option>
							<option value="yhoo,msft,tivo">All</option>
						</select>
					</td>
				</tr>
			</table>
		</tr>
		<tr>
			<table class="serviceField">
				<tr>
					<td><input type="checkbox" name="facebookChk" />Facebook</td>
					<td align="right"> Id: </td>
					<td><input type="text" disabled="true" name="facebookId" /></td>
				</tr>
				<tr>
					<td></td>
					<td align="right"> password:</td>
					<td> <input type="password" disabled="true" name="facebookPw"/></td>
				</tr>
			</table>
		</tr>
		<tr>
			<table class="serviceField">
				<tr>	
					<td><input type="checkbox" name="twitterChk"/>Twitter</td>
					<td align="right"> Id : </td>
					<td><input type="text" disabled="true" name="twitterId"/></td>
				</tr>
				<tr>
					<td></td>
					<td align="right"> password: </td>
					<td><input type="password" disabled="true" name="twitterPw"/></td>
				</tr>
			</table>
		</tr>	
	</div>
	<div id="footer">
		<tr>
			<td><input type="submit" value="register"></td>
		</tr>
	</div>	
	</table>

</form>
</div>

<script type="text/ecmascript">
$("input[name=userid]").focusout(function() {
	  validateId();
	}); 
$("input[name=userpassword]").focusout(function() {
	  validatePw();
	}); 	
$("input[name=yahooWeatherChk]").change(function() {
	  toggleYahooZipText();
	}); 	
$("input[name=yahooChk]").change(function() {
	  toggleYahooSelector();
	}); 	
$("input[name=facebookChk]").change(function() {
	  toggleFacebookText();
	}); 
$("input[name=twitterChk]").change(function() {
	  toggleTwitterText();
	}); 	
	
</script>
</body>
</html>